.content {
  width: 1194px;
  margin: 0 auto;
  margin-top: 74px;
  margin-bottom: 100px;
  .home {
    .list {
      width: 840px;
      .box {
        width: 840px;
        background: #fff;
        border-bottom: 1px solid #f5f5f5;
        & > div {
          width: 840px;
          box-sizing: border-box;
          padding: 14px;
          // height: 148px;
          & > a {
            width: 120px;
            height: 120px;
            overflow: hidden;
            img {
              width: 120px;
              height: 120px;
              transition: all 0.5s;
              &:hover {
                transform: scale(1.4, 1.4);
              }
            }
          }
          .list-ri {
            width: 678px;
            padding-left: 12px;
            .list-ri-top {
              min-height: 76px;
              height: auto !important;
              .title {
                a {
                  display: inline-block;
                  padding: 0 15px 0 0;
                  background-color: #f49900;
                  color: #fff;
                  border-radius: 10px;
                  font-size: 12px;
                  line-height: 20px;
                  margin-bottom: 2px;
                  text-align: left;
                  margin-top: 2px;
                  font-weight: 700;
                  img {
                    vertical-align: top;
                    width: 21px;
                    height: 20px;
                    margin-right: 6px;
                    position: relative;
                    left: -1px;
                  }
                }
              }
              .list-main {
                font-weight: 700;
                font-size: 15px;
                color: #4b4c4d;
                display: block;
                word-wrap: break-word;
                line-height: 22px;
                cursor: pointer;
              }
              .url {
                margin: 8px 0;
                font-size: 12px;
                color: #999;
              }
            }
            .list-ri-bot {
              margin-top: 22px;
              height: 22px;
              .information {
                line-height: 22px;
                .name {
                  img {
                    width: 22px;
                    height: 22px;
                    border-radius: 22px;
                    border: 1px solid #f5f5f5;
                  }
                  .author-name {
                    margin-left: 6px;
                    font-size: 12px;
                    color: #999;
                  }
                }
                .time {
                  margin-left: 6px;
                  font-size: 12px;
                  color: #999;
                }
                a {
                  float: left;
                  font-size: 0;
                  i {
                    width: 20px;
                    height: 20px;
                    background: url('https://dig.chouti.com/images/subjects/news-8ef7e883ad.png');
                    display: inline-block;

                    vertical-align: middle;
                    margin-right: 5px;
                    &.er {
                      background: url('https://dig.chouti.com/images/subjects/read-a0b252a97b.png');
                      background-size: 100%;
                      &:hover {
                        background: url('https://dig.chouti.com/images/subjects/read-hover-0acb970227.png');
                        background-size: 100%;
                      }
                    }
                    background-size: 100%;
                  }
                  i:hover {
                    background: url('https://dig.chouti.com/images/subjects/news-hover-04d79bfeea.png');
                    background-size: 100%;
                  }
                  i:hover + span {
                    display: inline-block;
                  }
                  span {
                    display: none;
                    font-size: 14px;
                    color: #654441;
                    vertical-align: middle;
                  }
                }
              }
              .operation {
                padding-right: 10px;
                margin-top: 3px;
                a {
                  display: inline-block;
                  min-width: 60px;
                  height: 16px;
                  line-height: 16px;
                  font-size: 14px;
                  color: #aeaeae;
                  cursor: pointer;
                  vertical-align: middle;
                  & > span {
                    width: 16px;
                    height: 16px;
                    position: relative;
                    float: left;
                    overflow: hidden;
                    &.zi {
                      font-weight: 700;
                      margin-left: 4px;
                    }
                    i {
                      display: inline-block;
                      width: 44px;
                      height: 44px;
                      position: absolute;
                      top: -15px;
                      left: -14px;
                    }
                  }
                  &.re {
                    i {
                      background: url('https://dig.chouti.com/images/operate/recommend-bff29b548b.png');
                      background-size: auto 100%;
                      background-repeat: no-repeat;
                    }
                    &:hover i {
                      background: url('https://dig.chouti.com/images/operate/recommend_active-7a8477343b.png');
                      background-size: auto 100%;
                      background-repeat: no-repeat;
                    }
                    &:hover {
                      color: #f8aa00;
                    }
                    margin-right: 4px;
                  }
                  &.xin {
                    span:first-child {
                      background: url('https://dig.chouti.com/images/operate/comment-d4e0fc5925.png');
                      background-size: auto 100%;
                      background-repeat: no-repeat;
                    }
                    &:hover span:first-child {
                      background: url('https://dig.chouti.com/images/operate/comment_active-3d22c87009.png');
                      background-size: auto 100%;
                      background-repeat: no-repeat;
                    }
                    margin-right: 4px;
                  }
                  &.guan {
                    i {
                      background: url('https://dig.chouti.com/images/operate/save-56845dd49a.png');
                      background-size: auto 100%;
                      background-repeat: no-repeat;
                    }
                    &:hover {
                      i {
                        background: url('https://dig.chouti.com/images/operate/save_active-64c98269ee.png');
                        background-size: auto 100%;
                        background-repeat: no-repeat;
                      }
                    }
                  }
                  &.fen {
                    span:first-child {
                      background: url('https://dig.chouti.com/images/operate/share-d0b662149a.png');
                      background-size: auto 100%;
                      background-repeat: no-repeat;
                    }
                    &:hover {
                      span:first-child {
                        background: url('https://dig.chouti.com/images/operate/share_active-71feb070e9.png');
                        background-size: auto 100%;
                        background-repeat: no-repeat;
                      }
                    }
                    position: relative;
                    min-width: 16px;
                    margin-left: 40px;
                  }
                }
              }
            }
          }
        }
      }
      .listBot {
        text-align: center;
        width: 200px;
        margin: 48px auto 0;
        height: 48px;
        line-height: 29px;
        font-weight: 700;
        a {
          display: block;
          padding: 8px 22px;
          text-align: center;
          border-radius: 2px;
          border: 1px solid #f8aa00;
          cursor: pointer;
          transition: all 0.2s ease-in-out;
          background-color: #f8aa00;
          color: #fff;
          font-size: 14px;
        }
      }
    }
    .right-list {
      width: 336px;
      .banBox {
        background-color: #fff;
        text-align: center;
        font-size: 13px;
        overflow: hidden;
        height: 44px;
        line-height: 44px;
        position: relative;
        & > div {
          transition: top 0.4s;
          width: 100%;
          position: absolute;
          left: 0;
          z-index: 10;
        }
        .one {
          img {
            width: 34px;
          }
        }
        .two {
          img {
            width: 74px;
          }
        }
        a {
          display: block;
          line-height: 44px;
          background: #fff;
          img {
            vertical-align: middle;
          }
          span {
            margin-left: 5px;
          }
        }
      }
      .extra-common-con {
        background-color: #fff;
        box-sizing: border-box;
        text-align: center;
        padding: 14px;
        text-align: left;
        display: inline-block;
        width: 100%;
        color: #4b4c4d;
        border-radius: 2px;
        .rule-icon {
          width: 18px;
          height: 18px;
          position: relative;
          top: 3px;
        }
        .rule-txt {
          margin-left: 8px;
          font-size: 13px;
        }
        .divide-line {
          display: inline-block;
          width: 1px;
          height: 12px;
          border-left: 1px solid #999;
          margin: 0 4px;
          position: relative;
          top: 2px;
        }
        .rule-note {
          font-size: 12px;
          color: #999;
        }
      }
      .mb18 {
        margin-bottom: 18px;
      }
    }
  }
}

.separate-line {
  display: inline-block;
  width: 1px;
  height: 10px;
  border-left: 1px solid #eaeaea;
  margin: 6px 12px;
}
